@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
header{
    width: 100%;
    height: vw(76);
    position: absolute;
    top:0;
    .ring-head{
        padding-left: vw(28);
        padding-top: vw(22);
        img{
            width: vw(18);
            height: vw(37);
        }
    }
    .ring-head2{
        padding-left: vw(260);
        padding-top: vw(24);
        p{
            font-size: vw(30);
            color: black;
        }
    }
}
section{
    position: absolute;
    top: vw(76);
    bottom: 0;
    .ring-zhu{
        width: vw(585);
        height: vw(98);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-zhu1{
            margin-top: vw(34);
            span{
                font-size: vw(30);
                color: #737373;
                b{
                     color: black;
                     margin-left: vw(24);
                     font-weight: normal;
                }
            }
        }
        .ring-zhu2{
            margin-top: vw(36);
            img{
                width: vw(15);
                height: vw(25);
            }
        }
    }
    .ring-name{
        width: vw(585);
        height: vw(101);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-name1{
            margin-top: vw(35);
            span{
                font-size: vw(30);
                color: #737373;
                b{
                     color: black;
                     margin-left: vw(24);
                     font-weight: normal;
                }
            }
        }
    }
    .ring-jian{
        width: vw(585);
        height: vw(100);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-jian1{
            margin-top: vw(35);
            span{
                font-size: vw(30);
                color: #737373;
                b{
                     color: black;
                     margin-left: vw(24);
                     font-weight: normal;
                }
            }
        }
    }
    .ring-let{
        width: vw(585);
        height: vw(100);
        margin:0 auto;
        .ring-let1{
            margin-top: vw(37);
            p{
                font-size: vw(30);
                color: #737373;
            }
        }
        .ring-let2{
            margin-top: vw(32);
            img{
                width: vw(35);
                height: vw(35);
                margin-right: vw(13);
            }
             img:nth-child(2){
                width: vw(15);
                height: vw(25);
                margin-right: 0;
                
            }
        }
    }
    .ring-person{
        width: 100%;
        height: vw(60);
        background: #f2f2f2;
        div{
            float: left;
            font-size: vw(24);
            color: #6d6d6d;
            margin-left: vw(26);
            margin-top: vw(15);
            font-weight: bold;
            b{
                margin-left: vw(18);
                color: black;
                font-weight: normal;
            }
        }
        div:nth-child(2){
            margin-left: vw(60);
        }
        div:nth-child(3){
            margin-left: vw(60);
        }
    }
    .ring-ding{
        width: vw(585);
        height: vw(100);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-ding1{
            
            p{
                font-size: vw(30);
                margin-top: vw(30);
                color: #737373;
            }
        }
        .ring-ding2{
            width: vw(100);
            height: vw(60);
            background: black;
            border-radius:vw(30);
            margin-top: vw(20);
            position: relative;
            border: 1px solid #dcdcdc;
        }
        #huilai1{
            position: absolute;
            content: "";
            top:vw(1);
            left:vw(1);
            width: vw(55);
            height: vw(54);
            border-radius:vw(28);
            background: white;
            border: 1px solid #dcdcdc;
        }
    }
    .ring-zhi{
        width: vw(585);
        height: vw(100);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-zhi1{
            p{
                font-size: vw(30);
                margin-top: vw(30);
                color: #737373;
            }
        }
        .ring-zhi2{
            width:vw(100);
            height: vw(60);
            border-radius: vw(30);
            background: black;
            position: relative;
            margin-top: vw(20);
            border: 1px solid #dcdcdc;
        }
        #huilai2{
            position: absolute;
            content: "";
            top:vw(2);
            left:vw(1);
            width: vw(55);
            height: vw(54);
            border-radius:vw(28);
            background: white;
            border: 1px solid #dcdcdc;
        }
    }
    .ring-open{
        width: vw(585);
        height: vw(100);
        margin: 0 auto;
        border-bottom: 1px solid #dcdcdc;
        .ring-open1{
            
            p{
               color: #737373;
                font-size: vw(30);
                margin-top: vw(30);
            }
        }
        .ring-open2{
            width:vw(100);
            height: vw(60);
            border-radius: vw(30);
            background:darkgray;
            position: relative;
            margin-top: vw(20);
            border: 1px solid #dcdcdc;
            #huilai3{
                position: absolute;
                content: "";
                top:vw(2);
                right:0;
                width: vw(55);
                height: vw(54);
                border-radius:vw(28);
                background: white;
                border: 1px solid #dcdcdc;
            }
        }
    }
    .ring-look{
        width: vw(585);
        height: vw(399);
        margin: 0 auto;
        margin-top: vw(30);
        background: #f2f2f2;
        border: 1px solid #828282;
        border-radius: vw(8);
        .ring-look11{
        .ring-look1{
            margin-top: vw(32);
            margin-left: vw(18);
            p{
                font-size: vw(22);
                color: #5e5e5e;
            }
        }
        .ring-look2{
            margin-right: vw(17);
            margin-top: vw(32);
            p{
                font-size: vw(22);
                color: #9c9c9c;;
            }
        }
        }
        ul{
            margin-top: vw(28);
            li{
                box-sizing: border-box;
                width:vw(77);
                height: vw(87);
                text-align: center;
                float: left;
                margin-left: vw(73);
                margin-top: vw(10);
                position: relative;
                .ring-look-weixin{
                    position: absolute;
                    top:vw(-20);
                    left:vw(60);
                    width:vw(80);
                    height: vw(80);
                    display: none;
                    img{
                        width:vw(100);
                        height: vw(100);
                    }
                    p{
                        margin-top: vw(0);
                        font-size: vw(16);
                        text-align: center;
                    }
                }
                .ring-look-weixin1{
                    position: absolute;
                    top:vw(-20);
                    left:vw(-80);
                    width:vw(80);
                    height: vw(80);
                    display: none;
                    img{
                        width:vw(100);
                        height: vw(100);
                        
                    }
                    p{
                        margin-top: vw(0);
                        font-size: vw(16);
                        text-align: center;
                    }
                }
                .ring-look-img{
                    width:vw(55);
                    height: vw(55);
                    margin: 0 auto;
                    img{
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }
                p{
                    margin-top: vw(10);
                    font-size: vw(18);
                    white-space:nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    a{
                         color: black;
                    }
                    }
            }
            li:nth-child(4n-3){
                margin-left: vw(20);
            }
            li:nth-child(-n+4){
                margin-top: 0;
            }
            #ring-houer:target .ring-look-weixin{
               display: block;
            }
            #ring-houer1:target .ring-look-weixin{
               display: block;
            }
            #ring-houer2:target .ring-look-weixin{
               display: block;
            }
            #ring-houer3:target .ring-look-weixin1{
               display: block;
            }
            #ring-houer4:target .ring-look-weixin{
               display: block;
            }
            #ring-houer5:target .ring-look-weixin{
               display: block;
            }
            #ring-houer6:target .ring-look-weixin{
               display: block;
            }
            #ring-houer7:target .ring-look-weixin1{
               display: block;
            }
            #ring-houer8:target .ring-look-weixin{
               display: block;
            }
            #ring-houer9:target .ring-look-weixin{
               display: block;
            }
            #ring-houer10:target .ring-look-weixin{
               display: block;
            }
            #ring-houer11:target .ring-look-weixin1{
               display: block;
            }
        }  
    }
    input[type="button"]{
        margin-top: vw(33);
        margin-left: vw(167);
        width: vw(300);
        height: vw(58);
        font-size: vw(26.67);
        color: white;
        background: #333333;
        border-radius: vw(4);
    }
}
.ring-huan{
    animation: open1 100ms linear forwards;
}
.class-opens{
    animation: open 100ms linear forwards;
}
.ring-huan1{
    animation: open3 100ms linear forwards;
}
.class-opens1{
    animation: open2 100ms linear forwards;
}
.ring-huilai{
    animation: go1 100ms linear forwards;
}
.ring-color{
    animation: go2 100ms linear forwards;
}

@keyframes open{
    0%{transform: translateX(vw(0));}
    100%{transform: translateX(vw(40));}
}
@keyframes open1{
    0%{background: black;}
    100%{background:darkgray;}
}

@keyframes open2{
    0%{transform: translateX(vw(0));}
    100%{transform: translateX(vw(-41));}
}
@keyframes open3{
    0%{background:darkgray;}
    100%{background:black;}
}

@keyframes go1{
    0%{transform: translateX(vw(40));}
    100%{transform: translateX(vw(0));}
}
@keyframes go2{
    0%{background:darkgray;}
    100%{background:black;}
}